<div id="layout-sidebar" class="sidebar" [class.siderHide]="!navDisplay">
  <ul class="ul-parent">
    <li *ngFor="let item of items;let index = index" routerLinkActive="active">
      <div *ngIf="item.visible&&item.items" class="sidebar-title text-overflow" [ngStyle]="{'color':item.expanded || item.visible ?'#D8E3ED':'#D8E3ED'}" (click)="handleClick($event,item,index)" >
          <i class="fa" [ngClass]="item.icon"></i>
          <span class="sidebar-label">{{item.label}}</span>
        </div>
        <ul *ngIf="item.visible && item.items && item.items.length>0" class="ul-child"
          [class.showpopup]="menuPopup.label == item.label && menuPopup.popupDisplay"
          [class.showleaf]="navDisplay && item.expanded"
          [ngStyle]="{'top':menuPopup.label == item.label ? menuPopup.top+'px':'0px'}">
          <li *ngFor="let childLevelItem of item.items;let childIndex = index">
            <div *ngIf="childLevelItem.visible" class="text-overflow" id="{{childLevelItem.label}}" [ngStyle]="{'color':(activeLink && childLevelItem.routerLink === activeLink)?'#EFC540':'#D8E3ED'}"
                  (click)="handleClick($event,childLevelItem,index,childIndex)" style="position: relative;overflow: visible;"
                  routerLinkActive="active"  [routerLink]="childLevelItem.routerLink">
              <i class="fa" [ngClass]="childLevelItem.expanded?'fa-minus':'fa-plus'" [ngStyle]="{'visibility':childLevelItem.items && childLevelItem.items.length>0 ? 'visible' : 'hidden' }"></i>
              <div style="display:inline-block;margin-left: 5px;">{{childLevelItem.label}}</div>
            </div>
          </li>
        </ul>
        <div *ngIf="item.visible&&!item.items" class="sidebar-title text-overflow" [ngStyle]="{'color':item.expanded || item.visible ?'#D8E3ED':'#D8E3ED'}" (click)="handleClick($event,item,index)"  [routerLink]="item.routerLink">
          <i class="fa" [ngClass]="item.icon"></i>
          <span class="sidebar-label">{{item.label}}</span>
        </div>
    </li>
  </ul>
</div>
